<template>
  <div>
    <el-scrollbar>
      <el-row>
        <el-col :span="24" style="padding: 25px">
          <testBaseTable
            :tableSetting="tableSetting"
            @handleCommon="handleCommon"
            @initDataParams="initDataParams"
            ref="basetable"
          ></testBaseTable>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding: 25px">
          <hr />
          <el-button-group>
            <el-button type="primary" @click="handleIconBtn"
              >图标按钮</el-button
            >
          </el-button-group>
          <p>查询参数：{{ paramsObj }}</p>
          <p>已选参数：{{ rowObj }}</p>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>


<script>
import { getData, postData, getSbList } from "@/api/test.js"; // 接口
import { SatusFilter } from "@/filter/index.js";
export default {
  data() {
    return {
      paramsObj: null,
      rowObj: {},
      flag: false,
      tableSetting: {
        //表格请求接口函数
        tabelApiFn: getSbList,
        //过滤表单
        filetrOptions: [
          {
            ref: "nameInput",
            componentName: "nameInput", //组件名，
            paramsName: "name", //查询参数
            placeholder: "请输入名字",
          },
          {
            ref: "sexInput",
            componentName: "sexInput",
            paramsName: "sex",
            placeholder: "请输入性别",
          },
          {
            ref: "statusSelect",
            componentName: "statusSelect", //组件名，
            paramsName: "status", //查询参数
            placeholder: "",
          },
          {
            ref: "typeSelect",
            componentName: "typeSelect", //组件名，
            paramsName: "type", //查询参数
            placeholder: "请选择类型",
          },
          {
            ref: "startTime",
            componentName: "startTime",
            paramsName: "startTime",
          },
          {
            componentName: "endTime",
            paramsName: "endTime",
          },
        ],
        tabletype: "selection", //表格类型 多选
        options: [
          //表格头配置  prop  label  width  align  html  color icon sortable
          {
            prop: "lastActivityTime",
            label: "带宽度--带颜色-带点击事件",
            width: 250,
            color: "red",
            handleName: "handleDetailById", //表格有的某一项可能也有点击事件
            fixed: true,
          },
          {
            prop: "locationId",
            label: "带排序",
            sortable: true,
            width: 200,
          },
          {
            prop: "locationValue",
            label: "地址",
            width: 200,
          },
          {
            prop: "termCode",
            label: "设备编码-插入自定义组件",
            width:300,
            comp:'mydiycomp'
          },
          {
            prop: "termId",
            label: "配送信息-多单元合并",
            width:300,
            children: [
              {
                prop: "termId",
                label: "姓名",
              },
              {
                prop: "termId",
                label: "地址",
              },
            ],
          },
          {
            prop: "termName",
            label: "设备名字-图片",
            comp: "tabItemImg",
            width:300,
          },
          {
            prop: "time",
            label: "时间",
            sortable: true,
            width:200,
          },
          {
            prop: "online",
            width: 200,
            label: "状态是否在线--带类型转换",
            html: (row) => {
              return SatusFilter(row.online); //后台返回的数据有时候是数字需要转换为中文
            },
          },
        ],
        //表格按钮配置 text size handleName:事件名  type icon show
        btns: [
          {
            text: "详情",
            size: "small",
            handleName: "handleOne",
            show: (row) => {
              return row.online == 2;
            },
          },
          {
            text: "删除",
            size: "small",
            type: "danger",
            handleName: "handleTwo",
          },
        ],
        btnsIcon: [
          // {
          //   text:'详情',
          //   icon:'icon-detail',
          //   handleName:'handleOne',
          //   show: row => {
          //     return row.online == 2;
          //   }
          // },
          // {
          //   text:'删除',
          //   icon:'icon-shanchu',
          //   handleName:'handleTwo',
          // }
        ],
      },
    };
  },
  mounted() {},
  methods: {
    handleCommon(name, row, idx) {
      console.log(name, row, idx);
      if (this[name]) {
        this[name](row, idx);
      }
    },
    handleTabelChoose(row) {
      console.log(row);
      this.rowObj = row;
      alert("多选删除事件", row);
    },
    handleOne(row) {
      this.rowObj = row;
      alert("我是蓝色按钮事件");
    },
    handleTwo(row) {
      this.rowObj = row;
      alert("我是红色按钮触发的事件");
    },
    handleDetailById(row) {
      this.rowObj = row;
      alert("我是点击表格里面的事件");
    },
    handleIconBtn() {
      this.tableSetting.btns = [];
      this.tableSetting.btnsIcon = [
        {
          text: "详情",
          icon: "icon-detail",
          handleName: "handleOne",
          show: (row) => {
            return row.online == 2;
          },
        },
        {
          text: "删除",
          icon: "icon-shanchu",
          handleName: "handleTwo",
        },
      ];
    },
    initDataParams(params) {
      this.paramsObj = { ...params };
    },
  },
};
</script>
